<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>
      Document
    </title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/cesium/1.104.0/Widgets/widgets.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/cesium/1.104.0/Cesium.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #my-map {
        width: 100%;
        height: 100%;
        background-color: black;
      }
      .cesium-info-box-wrapper {
        position: absolute;
        /* top: 20px;
        left: 20px; */
        background-color: rgba(255, 255, 255, 0.9);
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      .cesium-info-box h3 {
        margin: 0;
        font-size: 16px;
        font-weight: bold;
      }

      .cesium-info-box p {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="my-map"></div>
    <script>
      Cesium.Ion.defaultAccessToken =
        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NDYzMzkyYy0xZDIzLTQyYWItOTE4OC0xMWEyNDE5MzY0MjMiLCJpZCI6MTY1MjA0LCJpYXQiOjE2OTQxMzc5NDF9.HJPrgaIb6MfQPj4WXmR_coS8SEloNJH5LIGgXDOWX6Y'
      const viewer = new Cesium.Viewer('my-map', {
        homeButton: false, // 首页位置，点击之后将视图跳转到默认全球视角
        sceneModePicker: false, // 选择视角的模式
        baseLayerPicker: false, // 影像切换
        animation: true, // 是否显示动画控件
        infoBox: true, // 是否显示点击要素之后显示的信息
        selectionIndicator: false, // 要素选中框
        geocoder: false, // 是否显示地名查找控件
        timeline: true, // 是否显示时间线控件
        fullscreenButton: false, // 全屏按钮
        shouldAnimate: false, // 如果默认情况下时钟应尝试延长仿真时间，则为 true ，否则为 false
        navigationHelpButton: false, // 是否显示帮助信息控件
        terrain: Cesium.Terrain.fromWorldTerrain()
      })
      // fromDegrees: 将经纬度和高程转换为世界坐标
      const initialPosition = Cesium.Cartesian3.fromDegrees(
        -74.01881302800248,
        40.69114333714821,
        753
      )
      const initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
        21.27879878293835, // heading 水平旋转 -正北方向 默认方向为正北（0°），正角度为向东旋转，即左右摇头。
        -21.34390550872461, // pitch 上下旋转  --俯视朝向 默认角度为-90°，即朝向地面，0°为平视，正角度为仰视，负角度为俯视，即抬头低头。
        0.0716951918898415 // roll 视口翻滚角度 默认角度为0°，正角度向右旋转，负角度向左旋转，即左右歪头。
      )
      // setView: 设置相机的位置，方向和变换
      //   viewer.scene.camera.setView({
      //     destination: initialPosition, // 相机位置
      //     orientation: initialOrientation,
      //     endTransform: Cesium.Matrix4.IDENTITY
      //   })
      // 生成广州塔的位置,113.3191, 23.109
      var position2 = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 2000)
      //   flyto,让相机飞往某个地方
      viewer.camera.flyTo({
        destination: position2,
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-50),
          roll: 0
        }
      })
      // 添加3D建筑
      const osmBuildings = viewer.scene.primitives.add(
        new Cesium.createOsmBuildings()
      )

      const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
      handler.setInputAction(function(click) {
        console.log('click', click)
        var cartesian = viewer.camera.pickEllipsoid(
          click.position,
          viewer.scene.globe.ellipsoid
        )
        if (cartesian) {
          // Cartographic: 由经度，纬度和高度定义的位置。
          // fromCartesian: 从笛卡尔位置创建一个新的制图实例。中的值结果对象将以弧度表示。
          var cartographic = Cesium.Cartographic.fromCartesian(cartesian)
          // Cesium.Math.toDegrees: 将弧度转换为度数
          var longitude = Cesium.Math.toDegrees(cartographic.longitude)
          var latitude = Cesium.Math.toDegrees(cartographic.latitude)
          // 2D笛卡尔点。
          var position = new Cesium.Cartesian2(
            click.position.x,
            click.position.y
          )
          // 将经纬度转换为像素
          var pixelPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
            viewer.scene, // 现场
            cartesian
          )
          // 在此处执行点击时的操作,如弹出信息框
          showInfoBox(longitude, latitude, pixelPosition)
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      function showInfoBox(longitude, latitude, pixelPosition) {
        var parentElement = document.getElementsByClassName('cesium-widget')
        var childElement = document.getElementsByClassName(
          'cesium-info-box-wrapper'
        )
        console.log('showInfoBox -> childElement', parentElement, childElement)
        console.log('showInfoBox -> pixelPosition', pixelPosition.x)
        // childElement.length > 0 && (parentElement.removeChild(childElement))
        for (let i = 0; i < childElement.length; i++) {
          const element = childElement[i]
          element.style.display = 'none'
        }
        var infoBox = viewer.infoBox // 这里的viewer是您的Cesium Viewer对象
        var title = infoBox.viewModel.titleText // 获取标题
        var description = infoBox.viewModel.description // 获取描述信息
        var imagery = infoBox.viewModel.imageryUrl // 获取图像URL
        console.log('infoBox', title, description, imagery)
        var infoBox = document.createElement('div')
        infoBox.className = 'cesium-info-box'
        infoBox.innerHTML =
          '<h3>地点信息: ' +
          title +
          '</h3>' +
          '<p>经度: ' +
          longitude +
          '</p>' +
          '<p>纬度: ' +
          latitude +
          '</p>' +
          '<p>x坐标: ' +
          pixelPosition.x +
          '</p>' +
          '<p>y坐标: ' +
          pixelPosition.y +
          '</p>'

        var infoBoxWrapper = document.createElement('div')
        infoBoxWrapper.className = 'cesium-info-box-wrapper'
        infoBoxWrapper.style.top = pixelPosition.y + 'px'
        infoBoxWrapper.style.left = pixelPosition.x + 'px'
        infoBoxWrapper.appendChild(infoBox)
        viewer.canvas.parentElement.appendChild(infoBoxWrapper)
      }
    </script>
  </body>
</html>
